HTML5 Guidelines for Web Developers (Joanne Romanovich's Library) by Klaus Förster & Bernd Öggl
Author:Klaus Förster & Bernd Öggl
Language: eng
Format: epub
Publisher: Addison-Wesley
Published: 2011-06-19T16:00:00+00:00
5.12 Base64 Encoding with “canvas.toDataURL( )”
Base64 describes a method of encoding binary data as ASCII strings. In Canvas it is used to turn the canvas content, which only really exists as raster in memory, into a processable data: URL. The method to achieve this is
canvas.toDataURL(type, args)
We pass the MIME type of the desired output format as type using either image/png or image/jpeg. The former is the default encoding format and is also used if we omit type or specify a format with which the browser cannot cope. Any additional parameters can be accommodated by the optional argument args—for example, the image quality if selecting image/jpeg with valid numbers between 0.0 and 1.0.
The result of toDataURL() is a base64-encoded string. In the case of the 2 × 2 pixel canvas in the named colors navy, teal, lime, and yellow of Figure 5.27, it looks as follows:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg
AAAAIAAAACCAYAAABytg0kAAAAF0lEQVQImQXBAQEAAA
CCIKb33ADLFql0PuYIemXXHEQAAAAASUVORK5CYII=
These encoded strings can get rather long. The base64 version of our photo collage with the reflection effect, for example, has no less than 1,298,974 characters and would fill 325 pages of this book (with each page containing 50 lines of 80 characters each)!
So what is toDataURL()used for? Why convert binary image data to character strings? The answer is simple: With toDataURL(), we can make the fleeting in-memory canvas permanently available in HTML, enabling the user or an application to save it.
The first use of toDataURL() is copying a Canvas graphic into an HTMLImageElement. This becomes possible because the src attribute can also be a data: URI. The necessary code is short and requires an empty image in addition to a dynamically created canvas:
<!DOCTYPE html>
<title>Copy canvas onto image</title>
<img src="" alt="copied canvas content, 200x200 pixels">
<script>
var canvas = document.createElement("CANVAS");
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');
context.fillStyle = 'navy';
context.fillRect(0,0,canvas.width,canvas.height);
document.images[0].src = canvas.toDataURL();
</script>
The crucial line in the listing is printed in bold and shows how easy it is to copy—define the reference to the first image in the document and specify its src attribute as canvas.toDataURL(). As a result, we get a regular img element, which we treat just like any other image in the browser and can save as PNG.
With a simple onclick handler on the canvas element, we demonstrate the next use of toDataURL()—directly assigning the resulting data: URI as URL, but this time the output is not as PNG, but as JPEG:
document.images[0].onclick = function() {
window.location = canvas.toDataURL('image/jpeg');
};
The disadvantages of this method are that the URL can get painfully long sometimes (remember the 1.3 million characters?), and the fact that images in this format do not end up in the cache and therefore must be created anew with every call. Other potential applications of toDataURL() are with localstorage or XMLHttpRequest, allowing saving and accessing existing Canvas graphics both on the client side and server side. toDataURL() also serves us well for creating CSS styles with background-image or list-style-image where we can insert it as url() value.
Download
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.
The Mikado Method by Ola Ellnestam Daniel Brolund(22367)
Hello! Python by Anthony Briggs(21557)
Secrets of the JavaScript Ninja by John Resig Bear Bibeault(20110)
Dependency Injection in .NET by Mark Seemann(19514)
The Well-Grounded Java Developer by Benjamin J. Evans Martijn Verburg(19252)
Kotlin in Action by Dmitry Jemerov(19155)
OCA Java SE 8 Programmer I Certification Guide by Mala Gupta(18699)
Algorithms of the Intelligent Web by Haralambos Marmanis;Dmitry Babenko(17518)
Adobe Camera Raw For Digital Photographers Only by Rob Sheppard(16958)
Grails in Action by Glen Smith Peter Ledbrook(16668)
Sass and Compass in Action by Wynn Netherland Nathan Weizenbaum Chris Eppstein Brandon Mathis(14190)
Secrets of the JavaScript Ninja by John Resig & Bear Bibeault(12174)
Test-Driven iOS Development with Swift 4 by Dominik Hauser(10893)
A Developer's Guide to Building Resilient Cloud Applications with Azure by Hamida Rebai Trabelsi(10592)
Jquery UI in Action : Master the concepts Of Jquery UI: A Step By Step Approach by ANMOL GOYAL(10012)
Hit Refresh by Satya Nadella(9109)
The Kubernetes Operator Framework Book by Michael Dame(8535)
Exploring Deepfakes by Bryan Lyon and Matt Tora(8359)
Robo-Advisor with Python by Aki Ranin(8305)
